<template>
  <div>
    <input v-model="keyword" placeholder="Search books..." />
    <button @click="searchBooks">Search</button>
    <ul>
      <li v-for="book in books" :key="book.id">
        {{ book.title }} by {{ book.author }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      books: []
    };
  },
  methods: {
    searchBooks() {
      fetch(`/api/books?keyword=${this.keyword}`)
        .then(response => response.json())
        .then(data => (this.books = data));
    }
  }
};
</script>